<template>
	<view class="container">
		<view class="v-search">
			<view class="v-search-bar" @click="search">
				<uni-icons type="search" class="v-search-bar-icon"></uni-icons>
				随心选购
			</view>
			<view class="v-search-help" @click="help">
				<uni-icons type="help" class="icon-form-item" size="26" color="#000"></uni-icons>
				<text>帮助</text>
			</view>
		</view>

		<view class="v-header">
			<swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="2000" duration="1000">
				<swiper-item v-for="(item, index) in datas.Banners" @click="bannerClick(item)">
					<image class="swiper-item-image" :src="getServerPath(item.ImageUrl)" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="v-notice">
			<uni-icons type="sound-filled" class="icon-notice" size="28" color="#55aaff"></uni-icons>
			<text style="txt-notice">{{ datas.Notice.Title }}</text>
		</view>
		<view class="v-video" style="z-index: 1;" v-html="getVideo()">

		</view>
		<view class="v-quality">
			<view class="v-quality-item">
				<uni-icons type="medal-filled" class="icon-quality-item" size="24" color="#ce4d0e"></uni-icons>
				<text>放心购</text>
			</view>
			<view class="v-quality-item" style="margin-left: 30rpx">
				<uni-icons type="hand-up" class="icon-quality-item" size="24" color="#ce4d0e"></uni-icons>
				<text>担保交易</text>
			</view>
			<view class="v-quality-item">
				<uni-icons type="hand-up" class="icon-quality-item" size="24" color="#ce4d0e"></uni-icons>
				<text>优质服务</text>
			</view>
			<view class="v-quality-item">
				<uni-icons type="hand-up" class="icon-quality-item" size="24" color="#ce4d0e"></uni-icons>
				<text>实名认证</text>
			</view>
		</view>

		<view class="v-menu">
			<view class="v-menu-item" v-for="(item, index) in datas.Menus" @click="menuClick(item)">
				<view class="v-menu-item-image">
					<image :src="getServerPath(item.ImageUrl)" mode="aspectFit"></image>
				</view>
				<text>{{ item.Title }}</text>
			</view>
			<view class="v-menu-item" @click="menuMoreClick">
				<view class="v-menu-item-image">
					<image src="../../static/menu-gd.png" mode="aspectFit"></image>
				</view>
				<text>更多</text>
			</view>
		</view>
		<view class="v-ad">
			<view class="v-ad-item" v-for="(item, index) in datas.ADs" @click="adClick(item)">
				<image :src="getServerPath(item.ImageUrl)" mode="aspectFill"></image>
				<view class="v-ad-title">{{ item.Title }}</view>
			</view>
		</view>
		<view class="v-customer-service" @click="service">
			<image src="../../static/customerservice.png" mode="aspectFit"></image>
		</view>

		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from '../../common/util.js';
	export default {
		data() {
			return {
				datas: {
					Banners: [
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: 'Banner1',
						// 	ImageUrl: '../../static/bg.png',
						// 	CreateTime: '2024-04-06 12:23',
						// 	Order: '1'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: 'Banner2',
						// 	ImageUrl: '../../static/bj.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '2'
						// }
					],
					Notice: {
						Id: '00000-000-000000-000',
						Title: '',
						CreateTime: '2024-04-05 12:23'
					},
					PlatformIntroduceVidio: '',
					Menus: [
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '平台简介',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '1'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '新人必看',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '2'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '文件公告',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '3'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '产品介绍',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '4'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '如何赚钱',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '5'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '免费自用',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '6'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '裂变工具',
						// 	ImageUrl: '../../static/customerservice.png',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '7'
						// }
					],
					ADs: [
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '年入百万',
						// 	ImageUrl: '../../static/header.jpg',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '1'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '问题反馈',
						// 	ImageUrl: '../../static/header.jpg',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '2'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '产品背书',
						// 	ImageUrl: '../../static/header.jpg',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '3'
						// },
						// {
						// 	Id: '00000-000-000000-000',
						// 	Title: '精彩活动',
						// 	ImageUrl: '../../static/header.jpg',
						// 	CreateTime: '2024-04-05 12:23',
						// 	Order: '4'
						// }
					],
					Help: null
				},
				messageText: '',
				msgType: 'success',
				duration: 2000
			};
		},
		methods: {
			getVideo: function() {
				let _this = this;
				return `<video src="${_this.getServerPath(_this.datas.PlatformIntroduceVidio.Value)}" controls autoplay="autoplay" loop="loop" class="video-inner"  style="height:100%;width:100%;"></video>`

			},
			search: function() {
				uni.switchTab({
					url: '/pages/store/category'
				});
			},
			clearSearch: function() {
				console.log('clearSearch');
			},
			help: function() {
				console.log('help');
				let _this = this;
				uni.setStorage({
					key: 'CurrentCms',
					data: _this.datas.Help,
					success: function() {
						uni.navigateTo({
							url: '/pages/index/cms-content'
						});
					}
				});
			},
			bannerClick: function(item) {
				let _this = this;
				uni.setStorage({
					key: 'CurrentCms',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/index/cms-content'
						});
					}
				});
			},
			menuClick: function(item) {
				let _this = this;
				uni.setStorage({
					key: 'CurrentCms',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/index/cms-content'
						});
					}
				});
			},
			menuMoreClick: function() {
				console.log('menuClick');
				uni.navigateTo({
					url: '/pages/index/cms-list'
				});
			},
			adClick: function(item) {
				console.log('adClick');
				let _this = this;
				uni.setStorage({
					key: 'CurrentCms',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/index/cms-content'
						});
					}
				});
			},

			getServerPath: function(url) {
				let _this = this;
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},
			service: function() {
				uni.navigateTo({
					url: "/pages/sys/customer-service"
				})
			},
			loadIndexDatas() {
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				uni.request({
					url: _this.sysInfo.BasePath + 'Home/GetIndexDatas',
					method: 'POST',
					data: null,
					header: {
						'content-type': 'application/json',
						Authorization: `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							_this.datas = res.data.Data;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载首页信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载首页信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
			},
			init: function() {
				console.log('init');
				let _this = this;
				_this.loadIndexDatas();

			}
		},
		created() {

			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
			_this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding-bottom: 50rpx;
		height: 100%;
		padding-top: 110rpx;
	}

	.v-search {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.uni-searchbar {
		flex: 1;
	}

	.v-search-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: solid 1px #ce4d0e;
		color: #ce4d0e !important;
		height: 65rpx;
		border-radius: 10rpx;
		flex: 1;
		font-size: 26rpx;
		margin: 20rpx;
	}

	.v-search-bar .v-search-bar-icon {
		color: #ce4d0e !important;
		font-size: 26rpx;
		margin-right: 10rpx;
	}

	.v-search-help {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		width: 100rpx !important;
	}

	.v-header {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		height: 350rpx;
		width: 100%;
	}

	.swiper {
		height: 350rpx;
	}

	.swiper-item {
		height: 350rpx;
		text-align: center;
		cursor: pointer;
		width: 100%;
	}

	.swiper ::v-deep uni-image {
		width: 100%;
	}

	.v-notice {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 10rpx;
		font-size: 26rpx;
		color: #333;
	}

	.v-notice ::v-deep uni-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap !important;
	}

	.icon-notice {
		margin-right: 10rpx;
	}

	.v-video {
		display: flex;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
		height: 400rpx;
	}

	/* .v-video video {
	height: 100%;
	width: 100%;
} */

	.video-inner {
		height: 100% !important;
		width: 100% !important;
		z-index: 99 !important;
	}

	.v-quality {
		display: flex;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
		height: 80rpx;
		margin: 20rpx;
		background: #eab55e50;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.v-quality-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		color: #ce4d0e;
		flex: 1;
		cursor: pointer;
	}

	.icon-quality-item {
		margin-right: 5rpx;
	}

	.v-menu {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}

	.v-menu-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		padding: 10rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		width: 25%;
		height: 180rpx;
		letter-spacing: 2rpx;
		cursor: pointer;
	}

	.v-menu-item .v-menu-item-image {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		width: 100rpx;
		background: linear-gradient(145deg, #ffffffaf, #eab55eaf 25%, #c93a00ff);
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.v-menu-item-image image {
		height: 60rpx;
		width: 60rpx;
	}

	.v-ad {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}

	.v-ad-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		font-size: 48rpx;
		color: #fff;
		width: 49%;
		height: 250rpx;
		letter-spacing: 2rpx;
		margin: 0rpx 10rpx 10rpx 0rpx;
		cursor: pointer;
	}

	.v-ad-item:nth-child(2n) {
		margin-right: 0;
	}

	.v-ad-item image {
		width: 100%;
		height: 100%;
	}

	.v-ad-item view {
		margin-top: -250rpx;
		z-index: 10001;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.1);
		font-weight: bold;
	}

	.v-customer-service {
		position: fixed;
		right: 20rpx;
		bottom: 120rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #c93a00d0;
		height: 120rpx;
		width: 120rpx;
		border-radius: 100rpx;
		border: solid 1px #c93a00d0;
		z-index: 10001;
	}

	.v-customer-service image {
		height: 80rpx;
		width: 80rpx;
	}
</style>